<template>
  <div class="row">
    <div v-for="patient in patients" class="card col-2 patient-card">
      <div class="card-header text-left">
        <span class="card-title">{{patient.cardID}}</span>
      </div>
      <div class="card-body">
        <div class="patient-info row">
          <span class="patient-name font-weight-bold col-6">{{patient.name}}</span><br>
          <span class="patient-id text-muted col-6">{{patient.patientID}}</span>
        </div>
        <div class="patient-info row">
          <span>{{patient.bedSpace}}</span>
        </div>
        <div class="patient-info row">
          <span>年龄：{{patient.age}}岁</span>
        </div>
        <div class="patient-info row">
          <span>户籍：{{patient.domicile}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PatientDataStatistics',
  data() {
    return {
      patients: [
        {cardID: "A000001",name:"爱莉希雅",patientID:"00000001",bedSpace:"妇产科1室001号床",age:18,domicile:"上海"},
        {cardID: "A000002",name:"阿波尼亚",patientID:"00000002",bedSpace:"妇产科2室002号床",age:24,domicile:"上海"},
        {cardID: "A000003",name:"伊甸",patientID:"00000003",bedSpace:"妇产科1室002号床",age:24,domicile:"上海"},
        {cardID: "A000004",name:"维尔薇",patientID:"00000004",bedSpace:"妇产科2室002号床",age:20,domicile:"上海"},
        {cardID: "A000005",name:"樱",patientID:"00000005",bedSpace:"妇产科3室001号床",age:20,domicile:"上海"},
        {cardID: "A000006",name:"梅比乌斯",patientID:"00000006",bedSpace:"妇产科3室002号床",age:26,domicile:"上海"},
        {cardID: "A000007",name:"符华",patientID:"00000007",bedSpace:"妇产科4室001号床",age:22,domicile:"上海"},
        {cardID: "A000008",name:"帕朵菲莉丝",patientID:"00000008",bedSpace:"妇产科4室002号床",age:20,domicile:"上海"},
      ]
    }
  }
}
</script>

<style scoped>
@import "/src/assets/bootstrap.min.css";

.patient-card {
  margin: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;

}

.patient-card:hover {
  transform: translateY(-5px);
}


.card-header {
  background-color: white;
  border-bottom: none;
  padding: 10px 0 0;
}

.card-body {
  padding: 10px 0;
}

div.patient-info {
  margin-top: 5px;
  margin-bottom: 5px;
}

span.patient-name {
  font-size: 14px;
  line-height: 18px;

}

span.patient-id {
  font-size: 8px;
  line-height: 18px;
}
</style>
